<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en" class="fly-html-layui fly-html-store">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/layui/dist/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/global.css" charset="utf-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/global(1).css" charset="utf-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/store.css" charset="utf-8">
    <link rel="icon" href="${pageContext.request.contextPath}/front/images/favicon.ico">
    <title>酒店管理系统</title>
<body>
<!-- 顶部start -->
<div class="layui-header header header-store" style="background-color: #393D49;">
    <div class="layui-container">
        <a class="logo" href="${pageContext.request.contextPath}/index.html">
            <img src="${pageContext.request.contextPath}/front/images/logo.png" alt="layui">
        </a>
        <div class="layui-form component" lay-filter="LAY-site-header-component"></div>
        <ul class="layui-nav" id="layui-nav-userinfo">
            <li data-id="index" class="layui-nav-item layui-hide-xs">
                <a class="flytoTopNav" href="${pageContext.request.contextPath}/index.html">首页</a>
            </li>
            <li data-id="room" class="layui-nav-item layui-hide-xs">
                <a class="fly-case-active" data-type="toTopNav" href="${pageContext.request.contextPath}/room/list.html">房间</a>
            </li>
            <li data-id="myInfo" class="layui-nav-item fly-layui-user layui-this" id="FLY-notice">
                <a class="fly-nav-avatar fly-case-active" data-type="toTopNav" href="${pageContext.request.contextPath}/userinfo.jsp" id="LAY_header_avatar">
                    <img src="${pageContext.request.contextPath}/imgs/head.jpg"><cite class="layui-hide-xs">欢迎您：${sessionScope.currentUser.loginName}</cite>
                </a>
            </li>
            <li class="layui-nav-item layui-hide-xs">
                <a class="fly-case-active" data-type="exitSystem" href="JavaScript:void(0);" id="logout">退出</a>
            </li>
            <span class="layui-nav-bar" style="left: 560px; top: 55px; width: 0px; opacity: 0;"></span>
        </ul>
    </div>
</div>
<!-- 顶部end -->
<!-- 中间区域开始 -->
<div class="shop-nav shop-index">
    <div class="shop-banner" style="background: #f2f2f2;">
        <div class="layui-container layui-hide-xs">
            <!--会员菜单 start-->
            <div class="product-list">
                <dl>
                    <dt style="background-color: #009688">会员中心</dt>
                    <dd class="activate"><a href="${pageContext.request.contextPath}/userinfo.jsp">个人信息</a></dd>
                    <dd><a href="${pageContext.request.contextPath}/userOrder.jsp">我的预定</a></dd>
                </dl>
            </div>
            <!--会员菜单 end-->
        </div>
        <div class="layui-container">
            <div class="fly-panel fly-panel-user" pad20="">
                <div class="layui-tab layui-tab-brief" lay-filter="user">
                    <ul class="layui-tab-title" id="LAY_mine">
                        <li class="layui-this" lay-id="info">我的资料</li>
                        <li lay-id="pass">密码</li>
                    </ul>
                    <div class="layui-tab-content" style="padding: 20px 0;">
                        <div class="layui-form layui-form-pane layui-tab-item layui-show">
                            <form class="layui-form layui-form-pane" lay-filter="formInfo">
                                <input type="hidden" name="id" value="${sessionScope.currentUser.id}">
                                <div class="layui-form-item">
                                    <label for="loginName" class="layui-form-label">昵称</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="loginName" name="loginName" placeholder="请输入昵称" required="" lay-verify="required"  autocomplete="off" value="${sessionScope.currentUser.loginName}" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="realName" class="layui-form-label">姓名</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="realName" name="realName" placeholder="请输入姓名" required="" lay-verify="required" value="${sessionScope.currentUser.realName}" autocomplete="off"  class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="idCard" class="layui-form-label">身份证号</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="idCard" name="idCard" required="" lay-verify="required" autocomplete="off" value="${sessionScope.currentUser.idCard}" placeholder="请输入身份证号" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="phone" class="layui-form-label">手机</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="phone" name="phone" required="" lay-verify="required|phone" autocomplete="off" value="${sessionScope.currentUser.phone}" placeholder="请输入手机号" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="email" class="layui-form-label">邮箱</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="email" name="email" required="" placeholder="请输入邮箱" lay-verify="required|email" autocomplete="off" value="${sessionScope.currentUser.email}" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn" key="set-mine" lay-filter="updateInfo" lay-submit="">确认修改</button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-form layui-form-pane layui-tab-item">
                            <form class="layui-form layui-form-pane" lay-filter="formPwd">
                                <input type="hidden" name="id" value="${sessionScope.currentUser.id}">
                                <div class="layui-form-item">
                                    <label for="newPassword" class="layui-form-label">新密码</label>
                                    <div class="layui-input-inline">
                                        <input type="password" id="newPassword" name="newPassword" required="" lay-verify="required" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">6到16个字符</div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="rePassword" class="layui-form-label">确认密码</label>
                                    <div class="layui-input-inline">
                                        <input type="password" id="rePassword" name="rePassword" required="" lay-verify="required" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn" key="set-mine" lay-filter="updatePwd" lay-submit="">确认修改</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 中间区域结束 -->
<!-- 底部 -->
<div class="fly-footer">
    <p><a href="#">酒店系统</a> 2022 © <a href="#">test.cn</a></p>
</div>
<!-- 脚本开始 -->
<script src="${pageContext.request.contextPath}/front/layui/dist/layui.js"></script>
<script>
    layui.use(["form","element","carousel"], function () {
        var form = layui.form,
            layer = layui.layer,
            element = layui.element,
            carousel = layui.carousel,
            $ = layui.$;

        //渲染轮播图
        carousel.render({
            elem: '#LAY-store-banner'
            ,width: '100%' //设置容器宽度
            ,height: '460' //设置容器高度
            ,arrow: 'always' //始终显示箭头
        });


        var isLoginName = false;//定义变量，标识是否存在

        //当用户名输入框失去焦点事件触发验证
        $("[name='loginName']").blur(function () {
            //获取用户名
            var loginName = $("#loginName").val().trim();
            //判断用户名是否为空，不为空则发送请求验证
            if(loginName.length>0 & loginName!="${sessionScope.currentUser.loginName}"){
                $.get("${pageContext.request.contextPath}/user/checkName",{"loginName":loginName},function(result){
                    if(result.exist){
                        layer.alert(result.message,{icon:5});
                        //修改状态为true，表示已存在
                        isLoginName = true;
                    }else{
                        isLoginName = false;//不存在
                    }
                },"json");
            }
        });

        var isPhone = false;//定义变量，标识是否存在

        //当手机号输入框失去焦点事件触发验证
        $("[name='phone']").blur(function () {
            //获取手机号
            var phone = $("#phone").val().trim();
            //判断手机号是否为空，不为空则发送请求验证
            if(phone.length>0 & phone!="${sessionScope.currentUser.phone}"){
                $.get("${pageContext.request.contextPath}/user/checkPhone",{"phone":phone},function(result){
                    if(result.exist){
                        layer.alert(result.message,{icon:5});
                        //修改状态为true，表示已存在
                        isPhone = true;
                    }else{
                        isPhone = false;//不存在
                    }
                },"json");
            }
        });

        var isIdCard = false;

        //当身份证号输入框失去焦点事件触发验证
        $("[name='idCard']").blur(function () {
            //获取手机号
            var idCard = $("#idCard").val().trim();
            //判断手机号是否为空，不为空则发送请求验证
            if(idCard.length>0 & idCard!="${sessionScope.currentUser.idCard}"){
                $.get("${pageContext.request.contextPath}/user/checkIdCard",{"idCard":idCard},function(result){
                    if(result.exist){
                        layer.alert(result.message,{icon:5});
                        //修改状态为true，表示已存在
                        isIdCard = true;
                    }else{
                        isIdCard = false;//不存在
                    }
                },"json");
            }
        });

        var isEmail = false;

        //当邮箱输入框失去焦点事件触发验证
        $("[name='email']").blur(function () {
            //获取手机号
            var email = $("#email").val().trim();
            //判断手机号是否为空，不为空则发送请求验证
            if(email.length>0 & email!="${sessionScope.currentUser.email}"){
                $.get("${pageContext.request.contextPath}/user/checkEmail",{"email":email},function(result){
                    if(result.exist){
                        layer.alert(result.message,{icon:5});
                        //修改状态为true，表示已存在
                        isEmail = true;
                    }else{
                        isEmail = false;//不存在
                    }
                },"json");
            }
        });

        //表单提交事件
        form.on("submit(updateInfo)",function (data) {
            //判断是否存在
            if(isLoginName){
                layer.alert("昵称已被使用，请重新输入！",{icon:5})
                return false;
            }
            if(isPhone){
                layer.alert("该手机号已注册，请重新输入！",{icon:5})
                return false;
            }
            if(isIdCard){
                layer.alert("该身份证号已注册，请重新输入！",{icon:5})
                return false;
            }
            if(isEmail){
                layer.alert("该邮箱已注册，请重新输入！",{icon:5})
                return false;
            }
            //发送请求
            $.post("${pageContext.request.contextPath}/user/updateUser",data.field,function(result){
                if(result.success){
                    layer.alert(result.message,{icon:6});
                    window.location.reload();
                }else{
                    layer.alert(result.message,{icon:5});
                }
            },"json");
            return false;
        });

        form.on("submit(updatePwd)",function (data) {
            if (data.field.newPassword.length < 6 | data.field.newPassword.length > 16 ){
                layer.msg('密码长度在6~16个字符');
                return false;
            }
            if (data.field.newPassword != data.field.rePassword) {
                layer.msg('两次新密码输入不一致');
                return false;
            }
            $.post("${pageContext.request.contextPath}/user/updatePwd",data.field,function(result){
                if(result.success){
                    //跳转到首页
                    window.location.href = "${pageContext.request.contextPath}/index.html"
                }else{
                    layer.alert(result.message,{icon:5});
                }
            },"json");
            return false;
        });

        $('#logout').on("click", function () {
            layer.confirm('确定要退出系统吗?', {icon: 3, title:'提示'}, function(index){
                //do something
                location.href="${pageContext.request.contextPath}/user/logout";
                layer.close(index);
            });
        });

    });
</script>
<!-- 脚本结束 -->
<ul class="layui-fixbar">
    <li class="layui-icon layui-fixbar-top" lay-type="top" style=""></li>
</ul>
<div class="layui-layer-move"></div>
</body>
</html>